<template>
  <q-dialog v-model="recordDetailVisible" position="top">
    <q-card style="width: 800px; max-width: 80vw;">
      <q-card-section class="text-h6">
        {{ formTypeName }} {{ $t('Job') }}:
        {{ recordDetail.value.jobName }}-{{ recordDetail.value.jobInnerName }}
      </q-card-section>
      <q-separator/>
      <q-card-section>
        <q-form ref="recordDetailForm">
          <gqa-form-top :recordDetail="recordDetail"></gqa-form-top>
          <div class="row q-gutter-md">
            <q-input outlined hint="" class="col" v-model="recordDetail.value.jobGroup"
                     :label="$t('Job') + $t('Group')"
                     :rules="[val => val && val.length > 0 || $t('NeedInput')]"/>
          </div>
          <div class="row q-gutter-md">
            <q-input outlined hint="" class="col" v-model="recordDetail.value.jobName"
                     :label="$t('Job') + $t('Name')"
                     :rules="[val => val && val.length > 0 || $t('NeedInput')]"/>
            <q-input outlined hint="" class="col" v-model="recordDetail.value.jobInnerName"
                     :label="$t('Job') + $t('Inner') + $t('Name')"
                     :rules="[val => val && val.length > 0 || $t('NeedInput')]"/>
            <q-field outlined hint="" class="col" dense :label="$t('Status')" stack-label>
              <template v-slot:control>
                <q-option-group v-model="recordDetail.value.status" :options="dictOptions.onOff"
                                color="primary" inline>
                  <template v-slot:label="opt">
                    <div class="row items-center">
                      <span>{{ $t(opt.label) }}</span>
                    </div>
                  </template>
                </q-option-group>
              </template>
            </q-field>
          </div>
          <div class="row q-gutter-md">
            <q-select class="col" outlined v-model="recordDetail.value.jobType" :options="dictOptions.jobType" emit-value
                      map-options :rules="[val => val && val.length > 0 || $t('NeedInput')]"
                      :label="$t('Job') + $t('Type')" @change="changeJobType"></q-select>
            <q-select class="col" outlined v-model="recordDetail.value.concurrent" :options="dictOptions.concurrent" emit-value
                      map-options :rules="[val => val && val.length > 0 || $t('NeedInput')]"
                      :label="$t('Concurrent')" ></q-select>
            <q-select class="col" outlined v-model="recordDetail.value.misfirePolicy" :options="dictOptions.misfirePolicy" emit-value
                      map-options :rules="[val => val && val.length > 0 || $t('NeedInput')]"
                      :label="$t('MisfirePolicy')" ></q-select>
          </div>
          <div class="row q-gutter-md">
            <q-input outlined hint="" class="col" v-model="recordDetail.value.startTime"
                     :label="$t('Start') + $t('Time')"
                     :rules="[val => val && val.length > 0 || $t('NeedInput')]">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-card>
                      <q-card-section>
                      <div class="q-gutter-md row items-start">
                        <q-date v-model="recordDetail.value.startTime" mask="YYYY-MM-DD HH:mm:ss">
                        </q-date>
                        <q-time v-model="recordDetail.value.startTime" mask="YYYY-MM-DD HH:mm:ss" format24h  with-seconds>
                        </q-time>
                      </div>
                      </q-card-section>
                      <q-card-actions>
                        <q-btn v-close-popup :label="$t('Close')" color="primary" flat/>
                      </q-card-actions>
                    </q-card>
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
            <q-input outlined hint="" class="col" v-model="recordDetail.value.endTime"
                     :label="$t('Stop') + $t('Time')"
            >
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-card>
                      <q-card-section>
                        <div class="q-gutter-md row items-start">
                          <q-date v-model="recordDetail.value.endTime" mask="YYYY-MM-DD HH:mm:ss">
                          </q-date>
                          <q-time v-model="recordDetail.value.endTime" mask="YYYY-MM-DD HH:mm:ss" format24h  with-seconds>
                          </q-time>
                        </div>
                      </q-card-section>
                      <q-card-actions>
                        <q-btn v-close-popup :label="$t('Close')" color="primary" flat/>
                      </q-card-actions>
                    </q-card>
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
          <div class="row q-gutter-md">
            <q-input outlined hint="" class="col" v-model.number="recordDetail.value.cron"
                     :label="$t('Cron')" v-if="recordDetail.value.jobType==='jobType_cron'" readonly>
              <template v-slot:after>
                <q-btn icon="lock_clock" :label="$t('CronCreate')" glossy class="cursor-pointer"
                       @click="toShowCron">
                </q-btn>
              </template>
            </q-input>
          </div>
          <div class="row q-gutter-md">
            <q-input outlined hint="" class="col" v-model.number="recordDetail.value.initialDelay" type="number"
                     :label="$t('InitialDelay')"/>
            <q-input outlined hint="" class="col" v-model.number="recordDetail.value.fixedRate" type="number"
                     :label="$t('FixedRate')" v-if="recordDetail.value.jobType==='jobType_simple'"
                    />
            <q-input outlined hint="" class="col" v-if="recordDetail.value.jobType==='jobType_simple'"
                     v-model.number="recordDetail.value.fixedDelay" type="number"
                     :label="$t('FixedDelay')"/>
          </div>
          <div class="row q-gutter-md">
            <q-input outlined hint="" type="number" class="col" v-model="recordDetail.value.sort"
                     :label="$t('Sort')">
            </q-input>
          </div>
        </q-form>
      </q-card-section>
      <q-separator/>
      <q-card-actions align="right">
        <q-btn :label="$t('Save')" color="primary" @click="handleAddOrEidt"/>
        <q-btn :label="$t('Cancel')" color="negative" v-close-popup/>
      </q-card-actions>
      <q-inner-loading :showing="loading">
        <q-spinner-gears size="50px" color="primary"/>
      </q-inner-loading>
    </q-card>
    <cronDialog :show="showCron" @close="closeCron" :initData="initCronData" @getCron="fillCron"></cronDialog>
  </q-dialog>
</template>


<script setup>
import useRecordDetail from 'src/composables/useRecordDetail'
import cronDialog from 'src/components/GqaCron/index.vue'
import {computed, ref, watch} from 'vue'
import {FormatDateTime} from 'src/utils/date';
const emit = defineEmits(['handleFinish'])
const url = {
  add: 'job/add-job',
  edit: 'job/edit-job',
  queryById: 'job/query-job-by-id',
}
const initCronData = ref(null)
const {
  dictOptions,
  formType,
  formTypeName,
  recordDetail,
  recordDetailVisible,
  loading,
  show,
  recordDetailForm,
  handleAddOrEidt
} = useRecordDetail(url, emit)
defineExpose({
  show,
  formType,
  recordDetail
})
const showCron = ref(false)

const toShowCron = () => {
  showCron.value = true
  initCronData.value = recordDetail.value.cron
}
const closeCron = () => {
  showCron.value = false
  initCronData.value = null
}
const fillCron = (val) => {
  recordDetail.value.cron = val
}
const changeJobType = (value, evt) => {
  if (value === 'jobType_simple') {
    recordDetail.value.cron = ''
  } else {
    recordDetail.value.fixedRate = ''
    recordDetail.value.fixedDelay = ''
  }
}
const methodOptions = ['POST']
</script>
